<!DOCTYPE html>
<html>
<head>
	<title>Incremental Quest</title>
	<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div style="height:100%;font-family:'Arial Black', Gadget, sans-serif;color:#666">
<div style='width:4%;display:inline-block;'></div>
<div id="mainColumn" style="width:90%;text-align:right;">
<div id="mainTitle" style="font-size:40px;margin:10px;margin-right:15%;">Incremental Quest v.1</div> <!-- Version -->
<div id='mainBox' style='border:3px solid;padding:20px;height:800px;text-align:left;'>
<div id='clickSpace' style="width:38%;vertical-align:top;text-align:left;">
	<div style="width:100%;overflow:auto;line-height:18px;">
		<h3 style='margin-bottom:10px'>1 Journey = 2.5% global price reduction</h3>
		<div style='margin-left:20px;'>
			<h2 id='questProgress1' class='progressNumbers number'></h2>
			<div class='mainNumberDesc'>Journey Points</div>
			<div id="JPGain" class="number">0</div> idle jp gained<br>
			<div id="overkill" class="number" style="margin-bottom:10px">0</div> overkill<br>
			<h2 id='questProgress2' class='progressNumbers number' style='color:hsl(120, 100%, 45%);'></h2>
			<div class='mainNumberDesc'>Points to next Journey complete</div>
		</div>
	</div>
	<div id="expDiv" style="width:100%">
		<h3 style="margin-top:0px;">Level</h3> <h3 id="level" class="number"></h3>
		<div id='outerBar'>
			<progress id='progressBar' style="width:95%;height:25px;margin-top:12px;" max="1" value="0"></progress>
		</div>
		exp gained: <div id="expGain" class="number"></div>
		<div style="float:right;"><div class="number" id="expMax">0</div> xp needed</div>
	</div>
	<div id='clickMe' onclick='increment()'>Gotta do quests!!</div>
	Clicks per Second: <div id="CPS" class="number">0</div>
	<div style="float:right;"><div class="number" id="clickGain">0</div> jp gained</div><br>
	<div id="travelInfo">
		Multipliers Gained: <div id="distance" class="number">0</div>
		<div style="float:right"><div id="amountSkipped" class="number">0</div> skipped</div>
	</div>
</div>

<div style='width:2%;display:inline-block;'></div>
<div id='middleSpace' class="buyColumn">
	<div id="topMiddleTab0" class='tab' style="width:46%;text-align:center;" onclick="switchTopMiddleTabs(this.id)">Display</div><div id="topMiddleTab1" class='tab' style="width:46%;color:#009CB9;text-align: center" onclick="switchTopMiddleTabs(this.id)">Options</div>
	<div id='displaySpace' class="boxWithTabs" style="height:44%">
		<div style="margin-left:20px;margin-top:10px;">
			<div id="displayDiv">
				<h2 id='display' class='progressNumbers' style='color:#9828FF;'></h2>
				<div class='mainNumberDesc'>Quests Completed</div>
				<h2 id='fame' class='progressNumbers'  style='color:#E7E748;'></h2>
				<div class='mainNumberDesc'>Fame</div>
				<div id="horsieDiv">
					<h2 id='horses' class='progressNumbers' style='color:brown;'></h2>
					<div class='mainNumberDesc'>Horses</div>
				</div>
			</div>
			<div id="optionsDiv">
				<div id="clearStorage" class="optionsBox" onclick="clearStorage()">
					Clear Save
				</div>
				<div id="toggleDisplay" class="optionsBox" onclick="toggleDisplay()">
					Toggle Display
				</div>
			</div>
		</div>
	</div>
	<div style='height:5%'></div>
	<div id="botMiddleTab0" class='tab' style="width:96%;text-align:center;margin-left:1%;">Idle Purchases</div>
	<div id='buyIdle' class="boxWithTabs">
		<div style='margin-left:10px;margin-top:10px;'>
			<div id='buy10' class="buyButton" onclick='buy(this.id, true)' >
				<div id="buycounts10" class="buyCount"></div>
				<h4>Auto-buy</h4><br>
				Cost: <div id='costbuy10' class='cost number'></div> <div style='color:#9828FF;'>Quests</div>
				<div class='hideForHover'>
					Value: <div id='valuebuy10' class='cost number'></div> auto-buy threshold<br>
					Next Value: <div id="nextValuebuy10" class="cost number"></div><br>
					If a building's cost is below the threshold, it will automatically be bought
				</div>
			</div>
			<div id='buy9' class="buyButton" onclick='buy(this.id, true)' >
				<div id="extra1" class="buyCount" style="color:teal;"></div><div style="float:right;">+</div>
				<div id="buycounts9" class="buyCount"></div>
				<h4>Sleep Walking</h4><br>
				Cost: <div id='costbuy9' class='cost number'></div> <div style='color:#9828FF;'>Quests</div>
				<div class='hideForHover'>
					Value: <div id='valuebuy9' class='cost number'></div> Journey Points per tick<br>
					Next Value: <div id="nextValuebuy9" class="cost number"></div> JP/s
				</div>
			</div>
			<div id='buy8' class="buyButton" onclick='buy(this.id, true)' >
				<div id="extra2" class="buyCount" style="color:teal;"></div><div style="float:right;">+</div>
				<div id="buycounts8" class="buyCount"></div>
				<h4>Sleep Training</h4><br>
				Cost: <div id='costbuy8' class='cost number'></div> <div style='color:#9828FF;'>Quests</div>
				<div class='hideForHover'>
					Value: <div id='valuebuy8' class='cost number'></div> Sleep Walking<br>
					Next Value: <div id="nextValuebuy8" class="cost number"></div><br>
					Also gives .1% stronger sleep walking
				</div>
			</div>
			<div id='buy7' class="buyButton" onclick='buy(this.id, true)' >
				<div id="buycounts7" class="buyCount"></div>
				<h4>Sleep Montage</h4><br>
				Cost: <div id='costbuy7' class='cost number'></div> <div style='color:#9828FF;'>Quests</div>
				<div class='hideForHover'>
					Value: <div id='valuebuy7' class='cost number'></div> Sleep Training<br>
					Next Value: <div id="nextValuebuy7" class="cost number"></div><br>
					Also gives 3% stronger sleep walking
				</div>
			</div>
		</div>
	</div>
</div>

<div style='width:2%;display:inline-block;'></div>
<div id='buySpace' class="buyColumn">
<div id="topRightTab0" class='tab' style="background-color:lightcyan;" onclick="switchTopRightTabs(this.id)">Basic</div>
<div id="topRightTab1" class='tab' style="background-color:lightgoldenrodyellow; color:#009CB9;" onclick="switchTopRightTabs(this.id)">EXP</div>
<div id="topRightTab2" class='tab' style="background-color:lightgrey;color:#009CB9;;" onclick="switchTopRightTabs(this.id)">Travel</div>
<div id="topRightTab3" class='tab' style="background-color:skyblue;color:#009CB9;" onclick="switchTopRightTabs(this.id)">Mana</div>
<div id="topRightTab4" class='tab' style="background-color:lightsteelblue;color:#009CB9;" onclick="switchTopRightTabs(this.id)">Weapons</div>
<div id="topRightTab5" class='tab' style="background-color:chartreuse;color:#009CB9;" onclick="switchTopRightTabs(this.id)">Luck</div>
<div id='buyQuests' class='boxWithTabs'>
	<div style='margin-left:10px;margin-top:10px;'>
		<div id="questsType0">
			<div id='buy1' class="buyButton" onclick='buy(this.id, true)' >
				<div id="buycounts1" class="buyCount"></div>
				<h4>Look Closer</h4><br>
				Cost: <div id='costbuy1' class='cost number'></div> <div style='color:#9828FF;'>Quests</div>
				<div class='hideForHover'>
					Value: <div id='valuebuy1' class='cost number'></div> Journey Points per click<br>
					Next Value: <div id="nextValuebuy1" class="cost number"></div>
				</div>
			</div>
			<div id='buy0' class="buyButton" onclick='buy(this.id, true)' >
				<div id="buycounts0" class="buyCount"></div>
				<h4>Walk Faster</h4><br>
				Cost: <div id='costbuy0' class='cost number'></div> <div style='color:#9828FF;'>Quests</div>
				<div class='hideForHover'>
					Value: <div id='valuebuy0' class='cost number'></div>% reduced quest completion time<br>
					Next Value: <div id="nextValuebuy0" class="cost number"></div>%
				</div>
			</div>
			<div id='buy2' class="buyButton" onclick='buy(this.id, true)' >
				<div id="buycounts2" class="buyCount"></div>
				<h4>Breathe Better</h4><br>
				Cost: <div id='costbuy2' class='cost number'></div> <div style='color:#9828FF;'>Quests</div>
				<div class='hideForHover'>
					Value: x<div id='valuebuy2' class='cost number'></div> to Journey Point gain<br>
					Next Value: x<div id="nextValuebuy2" class="cost number"></div>
				</div>
			</div>
			<div id='buy3' class="buyButton" onclick='buy(this.id, true)' >
				<div id="buycounts3" class="buyCount"></div>
				<h4>Carry More Stuff</h4><br>
				Cost: <div id='costbuy3' class='cost number'></div> <div style='color:#9828FF;'>Quests</div>
				<div class='hideForHover'>
					Value: <div id='valuebuy3' class='cost number'></div> quests per journey<br>
					Next Value: <div id="nextValuebuy3" class="cost number"></div><br><br>
				</div>
			</div>
		</div>
		<div id="questsType1">
			<div id='buy13' class="buyButton" onclick='buy(this.id, true)' >
				<div id="buycounts13" class="buyCount"></div>
				<h4>Combo</h4><br>
				Cost: <div id='costbuy13' class='cost number'></div> <div style='color:#9828FF;'>Quests</div>
				<div class='hideForHover'>
					Value: x<div id='valuebuy13' class='cost number'></div> JP Multiplier per idle tick until Journey Completion<br>
					Next Value: x<div id="nextValuebuy13" class="cost number"></div><br>
					Improved by Level
				</div>
			</div>
			<div id='buy11' class="buyButton" onclick='buy(this.id, true)' >
				<div id="buycounts11" class="buyCount"></div>
				<h4>Memory Lessons</h4><br>
				Cost: <div id='costbuy11' class='cost number'></div> <div style='color:#9828FF;'>Quests</div>
				<div class='hideForHover'>
					Value: Exp Needed to Level  / <div id='valuebuy11' class='cost number'></div> <br>
					Next Value: / <div id="nextValuebuy11" class="cost number"></div>
				</div>
			</div>
			<div id='buy12' class="buyButton" onclick='buy(this.id, true)' >
				<div id="buycounts12" class="buyCount"></div>
				<h4>Combat Lessons</h4><br>
				Cost: <div id='costbuy12' class='cost number'></div> <div style='color:#9828FF;'>Quests</div>
				<div class='hideForHover'>
					Value: x<div id='valuebuy12' class='cost number'></div> Multiplier to Look Closer and Breathe Better<br>
					Next Value: x<div id="nextValuebuy12" class="cost number"></div><br>
					Improved by Level
				</div>
			</div>
			<div id='buy14' class="buyButton" onclick='buy(this.id, true)' >
				<div id="buycounts14" class="buyCount"></div>
				<h4>Overkill</h4><br>
				Cost: <div id='costbuy14' class='cost number'></div> <div style='color:#9828FF;'>Quests</div>
				<div class='hideForHover'>
					Value: x<div id='valuebuy14' class='cost number'></div> to initial extra JP on Journey Completion<br>
					Next Value: <div id="nextValuebuy14" class="cost number"></div><br>
					Improved by Level
				</div>
			</div>
		</div>
		<div id="questsType2">
			<div id='buy15' class="buyButton" onclick='buy(this.id, true)' >
				<div id="buycounts15" class="buyCount"></div>
				<h4>Exotic Destinations</h4><br>
				Cost: <div id='costbuy15' class='cost number'></div> <div style='color:#9828FF;'>Quests</div>
				<div class='hideForHover'>
					Value: <div id='valuebuy15' class='cost number'></div>% chance to travel one extra time and gain a reward multiplier<br>
					Next Value: <div id="nextValuebuy15" class="cost number"></div>%<br>
					Gives JP + JP * Multiplier / 2<br>
					Extra chances carry over
				</div>
			</div>
			<div id='buy16' class="buyButton" onclick='buy(this.id, true)' >
				<div id="buycounts16" class="buyCount"></div>
				<h4>Shortcuts</h4><br>
				Cost: <div id='costbuy16' class='cost number'></div> <div style='color:#9828FF;'>Quests</div>
				<div class='hideForHover'>
					Value: <div id='valuebuy16' class='cost number'></div>% chance to skip a travel time<br>
					Next Value: <div id="nextValuebuy16" class="cost number"></div>%<br>
					Extra skips carry over
				</div>
			</div>
			<div id='buy17' class="buyButton" onclick='buy(this.id, true)' >
				<div id="buycounts17" class="buyCount"></div>
				<h4>Wild Horses</h4><br>
				Cost: <div id='costbuy17' class='cost number'></div> <div style='color:#9828FF;'>Quests</div>
				<div class='hideForHover'>
					Value: <div id='valuebuy17' class='cost number'></div>% chance extra per idle tick to find a horse until a horse is found<br>
					Next Value: <div id="nextValuebuy17" class="cost number"></div>%<br>
					Current Chance to find a horse: <div id="horseChance" class="cost number"></div><br>
					Horses skip all travelling
				</div>
			</div>
		</div>
		<div id="questsType3">

		</div>
		<div id="questsType4">

		</div>
		<div id="questsType5">

		</div>
	</div>
</div>
<div style='height:6%;border:1px solid;border-top:0;width:100%;text-align:center;margin-top:-4px;'>
	<div id="clickMult0" class="selectedMultiplier" onclick="changeClickMult(this.id)">1</div>
	<div id="clickMult1" class="clickMultiplier" onclick="changeClickMult(this.id)">5</div>
	<div id="clickMult2" class="clickMultiplier" onclick="changeClickMult(this.id)">50%</div>
	<div id="clickMult3" class="clickMultiplier" onclick="changeClickMult(this.id)">100%</div>
</div>


<div style='height:5%'></div>
<div id='buyUpgrades' style='height:43%;margin:0;border:1px solid;width:100%;overflow:auto;text-align:left;background-color:lightgoldenrodyellow'>
	<div style='width:100%;background-color:lightcoral;height:20%;border-bottom:5px solid black;text-align: center'>
		<div style="margin-top:10px;font-size:24px;font-weight:bold;line-height:16px;display:block">Seek Guidance</div>
		<div style="display:block;font-size:16px;line-height:16px;">Unlock new tabs</div>
		<div style="font-size:16px;">Cost: <div id="guidanceCost" class="number"></div></div><div style='color:#9828FF;'>&NonBreakingSpace;Quests</div>
	</div>
	<div style="width:45%;vertical-align: top;margin-top:1px;">
		<div class='guidanceOption' id='guidanceType1' onmouseover="guidanceHover(this)" style='background-color:lightgoldenrodyellow;'>
			<div class="guidanceOptionText">EXP</div>
		</div>
		<div class='guidanceOption' id='guidanceType2' onmouseover="guidanceHover(this)" style='background-color:lightgrey;'>
			<div class="guidanceOptionText">Travel</div>
		</div>
		<!--
		<div class='guidanceOption' id='guidanceType3' onmouseover="guidanceHover(this)" style='background-color:skyblue;'>
			<div class="guidanceOptionText">Mana</div>
		</div>
		<div class='guidanceOption' id='guidanceType4' onmouseover="guidanceHover(this)" style='background-color:lightsteelblue;'>
			<div class="guidanceOptionText">Weapons</div>
		</div>
		<div class='guidanceOption' id='guidanceType5' onmouseover="guidanceHover(this)" style='background-color:chartreuse;'>
			<div class="guidanceOptionText">Luck</div>
		</div> -->
	</div>
	<div style="width:50%;vertical-align: top;">
		<div class="guidanceHover" id="guidanceHover1" style="display:inline-block;">
			Better Idle Advantages<br><br>
			New system: EXP and Levels<br><br>
			EXP gain is (Idle JP Gain)^.5<br>
			<div class="flavorText">You idiot! You haven't been learning anything on your journeys!</div>
			<button id='buttonGuidance1' class="guidanceButton" onclick="buyGuidance(this)"></button>
		</div>
		<div class="guidanceHover" id="guidanceHover2">
			Better Manual Advantages<br><br>
			New system: Travelling<br><br>
			5 steps (initally) before Travel Completion, 10x JP<br>
			<div class="flavorText">What do you mean you've been inside this whole time?</div>
			<button id='buttonGuidance2' class="guidanceButton" onclick="buyGuidance(this)"></button>
		</div>
		<div class="guidanceHover" id="guidanceHover3">
			<div style="color:red">Requires EXP</div><br>
			Well Rounded Bonuses<br><br>
			New system: Mana and Spells<br><br>
			Start with one spell, gain more later<br>
			<div class="flavorText">... Spells are a thing, you know.</div>
			<button id='buttonGuidance3' class="guidanceButton" onclick="buyGuidance(this)"></button>
		</div>
		<div class="guidanceHover" id="guidanceHover4">
			<div style="color:red">Requires Travel</div><br>
			Stronger Manual Advantages<br><br>
			New system: Critical Hits when questing<br><br>
			<div class="flavorText">You're really going to go questing in that?</div>
			<button id='buttonGuidance4' class="guidanceButton" onclick="buyGuidance(this)"></button>
		</div>
		<div class="guidanceHover" id="guidanceHover5">
			<div style="color:red">Requires All</div><br>
			Chance Based Advantages<br><br>
			New system: ???<br>
			<button id='buttonGuidance5' class="guidanceButton" onclick="buyGuidance(this)"></button>
		</div>
	</div>
</div>
</div>
</div>
<div id="credits" style="margin-right:10%;">Created by: <div style="color:red">Stop_Sign</div></div>
</div>
<div style='width:4%;display:inline-block;'></div>
</div>
</body>
<script src="IncrementalScript.js"></script>

</html>
